<template>
	<view class="xy-goods-sku" @touchmove.stop.prevent="">
		<view class="xy-modal-box bottom-fixed xy-modal-box-bottom share-btn-model-box ovh" :class="[showModal?'xy-modal-show':'']" v-if="goodsInfo.sku_price">
			<view class="sku-box p-30" style="height: 730rpx;">
				<!--text class="xyicon icon-close psa" @tap.stop="showModal = false"></text-->
				<!--商品-->
				<view class="goods-box flex p-b-30 bg-w">
					<view class="l ovh br-10">
						<image :src="currentSkuPrice.image ? currentSkuPrice.image : goodsInfo.image" mode="widthFix" />
					</view>
					<view class="r m-l-20">
						<view class="title tb lh-40 m-t-5 ovh">{{ goodsInfo.title }}</view>
						<view class="flex m-t-10">
							<view class="tb ts-40 lh-40 tc-r"><text class="ts-28">￥</text>{{ currentSkuPrice.price || goodsInfo.price }}</view>
							<view class="m-l-auto" :style="'color:#808080;'">库存{{ currentSkuPrice.stock || goodsInfo.stock }}件</view>
						</view>
					</view>
				</view>

				<!--规格选项 -->
				<view class="sku-item-box m-t-30" style="height: 460rpx;">
					<view class="select-box" v-for="(item, index) in skuList" :key="item.id">
						<view class="tb">{{ item.name }}</view>
						<view class="flex m-t-20">
							<view class="item bl br-10 p-lr-40 p-tb-10 lh-28 m-r-30 ts-28" v-for="(item1, index1) in item.content" :key="item1.id"
								:style="currentSkuArray[item1.pid] == item1.id ? 'border-color:#f3a215;color:#f3a215;':''"
								:disabled="item1.disabled == true" @tap="chooseSku(item1.pid, item1.id, item1.disabled)">
                <text :class="item1.disabled?'disable':''">{{ item1.name }}</text>
							</view>
						</view>
					</view>
					<view class="sales m-t-50 lh-60 flex">
						<view class="tb">购买数量</view>
						<view class="r tb m-l-auto tc flex">
							<view class="ts-42 br-10 bg-w" @tap="reduce">-</view>
							<input @input="buyNumInput" type="number" class="br-10 m-lr-10 bg-w" :value="buyNum" />
							<view class="ts-42 br-10 bg-w" @tap="add">+</view>
						</view>
					</view>
				</view>

				<!--购买按钮 -->
				<view class="btn-box bottom-fixed tc">
					<view class="flex m-30">
						<view class="add-cart m-r-30 tc-w tm2b" @tap="confirmCart">
							加入购物车
						</view>
						<view class="buy m-l-auto tc-w tm1b" @tap="confirmBuy">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="xy-modal-mask" :class="[showModal?'xy-mask-show':'']" @tap="showModal =!showModal"></view>
	</view>

</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		components: {},
		data() {
			return {

				skuList: [],
				currentSkuPrice: {},
				currentSkuArray: [],
				buyNum: 1,
				confirmGoodsInfo: {},
				type: this.buyType
			};
		},
		props: {
			goodsInfo: {},
			value: {},
			buyType: {
				type: String,
				default: 'sku'
			},
			goodsType: {
				type: String,
				default: 'goods'
			}

		},
		created() {
			this.skuList = this.goodsInfo.sku;
			this.changeDisabled(false);
		},
		mounted() {
			// 单规格选项
			if (this.goodsInfo.is_sku == 0) {
				this.currentSkuPrice = this.skuPrice[0];
			}
		},
		watch: {
			type(nweVal, oldVal) {
				return newVal;
			}
		},
		computed: {
			skuPrice() {
				return this.goodsInfo.sku_price;
			},
			showModal: {
				get() {
					return this.value;
				},
				set(val) {
					val ? uni.hideTabBar() : uni.showTabBar();
					this.$emit('input', val);
					return val;
				}
			},
			currentSkuText() {
				var that = this;
				var str = '';
				var currentSkuArray = this.currentSkuArray;
				currentSkuArray.forEach(v => {
					that.skuList.forEach(s => {
						s.content.forEach(u => {
							if (u.id === v) {
								str += ' ' + u.name;
							}
						});
					});
				});
				that.$emit('getSkuText', str);
				return str;
			}
		},

		methods: {
			...mapActions('cart',{'addCartGoods':'addGoods'}),
			//减
			reduce(){
				this.buyNum --;
				if(this.buyNum < 1){
					this.buyNum = 1;
					this.$xyfun.msg('购买数量不能小于1');
				}
			},
			//输入
			buyNumInput(e){
				this.buyNum = e.detail.value;
				if (this.buyNum >= this.currentSkuPrice.stock) {
					this.buyNum = this.currentSkuPrice.stock;
					this.$xyfun.msg('库存不足');
					return;
				}
			},
			//加
			add(){
				this.buyNum ++;
				if (this.buyNum >= this.currentSkuPrice.stock) {
					this.buyNum = this.currentSkuPrice.stock;
					this.$xyfun.msg('库存不足');
					return;
				}
			},


			// 选择规格
      chooseSku(pid, skuId, disabled) {
        if(disabled) return;
				var that = this;
				var isChecked = true; // 选中 or 取消选中
				this.goodsNum = 1; //选择规格时，数量重置为1.
				this.maxStep = 999; //选择其他规格时，取消上个规格库存限制

				if (that.currentSkuArray[pid] != undefined && that.currentSkuArray[pid] == skuId) {
					// 点击已被选中的，删除并填充 ''
					isChecked = false;
					that.currentSkuArray.splice(pid, 1, '');
				} else {
					// 选中
					that.$set(that.currentSkuArray, pid, skuId);
				}

				var chooseSkuId = []; // 选中的规格大类
				that.currentSkuArray.forEach(sku => {
					if (sku != '') {
						// sku 为空是反选 填充的
						chooseSkuId.push(sku);
					}
				});

				// 当前所选规格下，所有可以选择的 skuPric
				var newPrice = this.getCanUseSkuPrice();

				// 判断所有规格大类是否选择完成
				if (chooseSkuId.length == that.skuList.length && newPrice.length) {
					that.currentSkuPrice = newPrice[0];
				} else {
					that.currentSkuPrice = {};
				}

				console.log(that.currentSkuArray);

				// 改变规格项禁用状态
				this.changeDisabled(isChecked, pid, skuId);
			},

			// 改变禁用状态
			changeDisabled(isChecked = false, pid = 0, skuId = 0) {
				var newPrice = []; // 所有可以选择的 skuPrice

				if (isChecked) {
					// 当前点击选中规格下的 所有可用 skuPrice
					for (var price of this.skuPrice) {
						if (price.stock <= 0) {
							// this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 buy_num 的小值
							continue;
						}
						if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
							newPrice.push(price);
						}
					}
				} else {
					newPrice = this.getCanUseSkuPrice();
				}

				// 所有存在并且有库存未选择的规格项 的 子项 id
				var noChooseSkuIds = [];
				for (var price of newPrice) {
					noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
				}

				// 去重
				noChooseSkuIds = Array.from(new Set(noChooseSkuIds));

				if (isChecked) {
					// 去除当前选中的规格项
					var index = noChooseSkuIds.indexOf(skuId.toString());
					noChooseSkuIds.splice(index, 1);
				} else {
					// 循环去除当前已选择的规格项
					this.currentSkuArray.forEach(sku => {
						if (sku.toString() != '') {
							// sku 为空是反选 填充的
							var index = noChooseSkuIds.indexOf(sku.toString());
							if (index >= 0) {
								// sku 存在于 noChooseSkuIds
								noChooseSkuIds.splice(index, 1);
							}
						}
					});
				}

				// 当前已选择的规格大类
				var chooseSkuKey = [];
				if (!isChecked) {
					// 当前已选择的规格大类
					this.currentSkuArray.forEach((sku, key) => {
						if (sku != '') {
							// sku 为空是反选 填充的
							chooseSkuKey.push(key);
						}
					});
				} else {
					// 当前点击选择的规格大类
					chooseSkuKey = [pid];
				}

				for (var i in this.skuList) {
					// 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
					if (chooseSkuKey.indexOf(this.skuList[i]['id']) >= 0) {
						continue;
					}

					for (var j in this.skuList[i]['content']) {
						// 如果当前规格项 id 不存在于有库存的规格项中，则禁用
						if (noChooseSkuIds.indexOf(this.skuList[i]['content'][j]['id'].toString()) >= 0) {
							this.skuList[i]['content'][j]['disabled'] = false;
						} else {
							this.skuList[i]['content'][j]['disabled'] = true;
						}
					}
				}
			},

			// 获取所有有库存的 skuPrice
			getCanUseSkuPrice() {
				var newPrice = [];

				for (var price of this.skuPrice) {
					if (price.stock <= 0) {
						continue;
					}
					var isOk = true;

					this.currentSkuArray.forEach(sku => {
						if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
							isOk = false;
						}
					});

					if (isOk) {
						newPrice.push(price);
					}
				}

				return newPrice;
			},

			// 加入购物车确定
			confirmCart() {
				var that = this;
				if (this.confirmSku()) {
					var confirmGoodsList = {
						list: [that.confirmGoodsInfo],
						from: 'goods'
					};
					that.addCartGoods(confirmGoodsList).then(res => {
						that.showModal = false;
						that.$xyfun.msg('加入购物车成功');
					});
				}
			},

			// 立即购买
			confirmBuy() {
				if (this.confirmSku()) {
					var confirmGoodsList = [];
					confirmGoodsList.push(this.confirmGoodsInfo);
					var params = {
						goodsList: confirmGoodsList,
						from: 'buynow', //立即购买
						orderType: this.goodsType,
					};
					this.$Router.push({
						path: '/pages/shop/confirm',
						query: params
					});
				}
			},

			// 确定规格
			confirmSku() {
				if (this.currentSkuPrice.stock == 0 || this.currentSkuPrice.stock < this.goodsNum) {
					this.$xyfun.msg('库存不足');
					this.showModal = false;
					return false;
				} else {
					this.currentSkuPrice.buy_num = this.buyNum;
					this.confirmGoodsInfo = {
						goods_id: this.currentSkuPrice.goods_id,
						buy_num: this.currentSkuPrice.buy_num,
						sku_price_id: this.currentSkuPrice.id,
						goods_price: this.currentSkuPrice.price
					};
					if (!this.confirmGoodsInfo.sku_price_id) {
						this.$xyfun.msg('请选择规格');
						return false;
					} else {
						this.showModal = false;
						return true;
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sku-box{
		.icon-close{right: 30rpx;top: 20rpx;}

		.goods-box{
			.l{
				width: 150rpx;height: 150rpx;
				image{width: 150rpx;}
			}
			.r{
				.title{height: 80rpx;}
				width: 520rpx;
			}
		}
		.sales{
			.r view{height: 60rpx;width: 60rpx;}
			.r input{width: 100rpx;height: 60rpx;}
		}

		.btn-box{
			.buy,.add-cart{width: 280rpx;height: 76rpx;border-radius: 36rpx;line-height: 72rpx;}
		}
	}
  .disable{
    text-decoration: line-through;
  }
</style>
